<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         * Demo3:label样式
         */
        #img_input2 {
            display: none;
        }
        #img_label2 {
            background-color: #f2d547;
            border-radius: 5px;
            display: inline-block;
            padding: 10px;
        }
        #preview_box2 img {
            width: 200px;
        }
    </style>
</head>
<body><h3>Demo3:label样式</h3>

    <input id="img_input2" type="file" accept="image/*"/>
    <label for="img_input2" id="img_label2">选择文件<i class="fa fa-plus fa-lg"></i></label>
    <div id="preview_box2"></div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        /*
         * Demo3:label样式
         */
        $("#img_input2").on("change", function(e) {

            var file = e.target.files[0]; //获取图片资源

            // 只选择图片文件
            if (!file.type.match('image.*')) {
                return false;
            }

            var reader = new FileReader();

            reader.readAsDataURL(file); // 读取文件

            // 渲染文件
            reader.onload = function(arg) {

                var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
                $("#preview_box2").empty().append(img);
            }
        });
    </script>
</body>
</html>